From e2ed31dd0112dc3bede53ceef9b957d2810e141e Mon Sep 17 00:00:00 2001 From: joonhoekim <26rote@gmail.com> Date: Wed, 27 Aug 2025 08:24:58 +0000 Subject: (김준회) 임시 관리자 페이지 - EDP 데이터 수동 관리 추가 및 세션검증 추가 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app/[lng]/admin/edp/components/item-selector.tsx | 368 +++++++++++++++++++++++ 1 file changed, 368 insertions(+) create mode 100644 app/[lng]/admin/edp/components/item-selector.tsx (limited to 'app/[lng]/admin/edp/components/item-selector.tsx') diff --git a/app/[lng]/admin/edp/components/item-selector.tsx b/app/[lng]/admin/edp/components/item-selector.tsx new file mode 100644 index 00000000..a81d2ff6 --- /dev/null +++ b/app/[lng]/admin/edp/components/item-selector.tsx @@ -0,0 +1,368 @@ +'use client' + +import { useState, useEffect } from 'react' +import { Button } from '@/components/ui/button' +import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog' +import { Input } from '@/components/ui/input' +import { Badge } from '@/components/ui/badge' +import { Search, Check } from 'lucide-react' +import { + ColumnDef, + flexRender, + getCoreRowModel, + getFilteredRowModel, + getPaginationRowModel, + getSortedRowModel, + useReactTable, + SortingState, + ColumnFiltersState, + VisibilityState, + RowSelectionState, +} from '@tanstack/react-table' +import { + Table, + TableBody, + TableCell, + TableHead, + TableHeader, + TableRow, +} from '@/components/ui/table' +import { Checkbox } from '@/components/ui/checkbox' +import { getItems } from '../actions/data-actions' +import { toast } from 'sonner' +import { Item } from '../types/item' + +interface ItemSelectorProps { + selectedItems: number[] + onItemsSelect: (itemIds: number[], itemsData?: Item[]) => void + disabled?: boolean +} + +export function ItemSelector({ selectedItems, onItemsSelect, disabled }: ItemSelectorProps) { + const [open, setOpen] = useState(false) + const [items, setItems] = useState([]) + const [loading, setLoading] = useState(false) + const [sorting, setSorting] = useState([]) + const [columnFilters, setColumnFilters] = useState([]) + const [columnVisibility, setColumnVisibility] = useState({}) + const [rowSelection, setRowSelection] = useState({}) + const [globalFilter, setGlobalFilter] = useState('') + + const columns: ColumnDef[] = [ + { + id: 'select', + header: ({ table }) => ( + table.toggleAllPageRowsSelected(!!value)} + aria-label="Select all" + /> + ), + cell: ({ row }) => ( + row.toggleSelected(!!value)} + aria-label="Select row" + /> + ), + enableSorting: false, + enableHiding: false, + }, + // 현업 관심 필드들 (우선 순위) + { + accessorKey: 'ProjectNo', + header: '프로젝트 번호', + cell: ({ row }) => ( +
{row.getValue('ProjectNo')}
+ ), + }, + { + accessorKey: 'itemName', + header: '아이템명', + cell: ({ row }) => ( +
{row.getValue('itemName')}
+ ), + }, + { + accessorKey: 'packageCode', + header: '패키지 코드', + cell: ({ row }) => ( +
{row.getValue('packageCode')}
+ ), + }, + // 추가 필드들 + { + accessorKey: 'itemCode', + header: '아이템 코드', + cell: ({ row }) => { + const code = row.getValue('itemCode') as string | null + return code ? ( +
{code}
+ ) : ( + - + ) + }, + }, + { + accessorKey: 'description', + header: '설명', + cell: ({ row }) => { + const description = row.getValue('description') as string | null + return description ? ( +
{description}
+ ) : ( + - + ) + }, + }, + { + accessorKey: 'unitOfMeasure', + header: '단위', + cell: ({ row }) => { + const unit = row.getValue('unitOfMeasure') as string | null + return unit ? ( + {unit} + ) : ( + - + ) + }, + }, + { + accessorKey: 'smCode', + header: 'SM 코드', + cell: ({ row }) => { + const code = row.getValue('smCode') as string | null + return code ? ( +
{code}
+ ) : ( + - + ) + }, + }, + { + accessorKey: 'steelType', + header: '강종', + cell: ({ row }) => { + const steelType = row.getValue('steelType') as string | null + return steelType ? ( + {steelType} + ) : ( + - + ) + }, + }, + { + accessorKey: 'itemLevel', + header: '레벨', + cell: ({ row }) => { + const level = row.getValue('itemLevel') as number | null + return level !== null ? ( +
{level}
+ ) : ( + - + ) + }, + }, + ] + + const table = useReactTable({ + data: items, + columns, + onSortingChange: setSorting, + onColumnFiltersChange: setColumnFilters, + onColumnVisibilityChange: setColumnVisibility, + onRowSelectionChange: setRowSelection, + onGlobalFilterChange: setGlobalFilter, + getCoreRowModel: getCoreRowModel(), + getPaginationRowModel: getPaginationRowModel(), + getSortedRowModel: getSortedRowModel(), + getFilteredRowModel: getFilteredRowModel(), + state: { + sorting, + columnFilters, + columnVisibility, + rowSelection, + globalFilter, + }, + initialState: { + pagination: { + pageSize: 10, + }, + }, + }) + + const loadItems = async () => { + setLoading(true) + try { + const result = await getItems() + if (result.success && result.data) { + setItems(result.data) + } else { + toast.error(result.error) + } + } catch { + toast.error('아이템을 불러오는 중 오류가 발생했습니다.') + } finally { + setLoading(false) + } + } + + const handleConfirmSelection = () => { + const selectedRows = table.getFilteredSelectedRowModel().rows + const selectedItemIds = selectedRows.map(row => row.original.id) + const selectedItemsData = selectedRows.map(row => row.original) + onItemsSelect(selectedItemIds, selectedItemsData) + setOpen(false) + } + + // 선택된 아이템 수 계산 + const selectedCount = Object.keys(rowSelection).length + + useEffect(() => { + if (open && items.length === 0) { + loadItems() + } + }, [open]) + + // 기존 선택 상태를 rowSelection에 반영 + useEffect(() => { + if (items.length > 0 && selectedItems.length > 0) { + const newRowSelection: RowSelectionState = {} + items.forEach((item, index) => { + if (selectedItems.includes(item.id)) { + newRowSelection[index] = true + } + }) + setRowSelection(newRowSelection) + } + }, [items, selectedItems]) + + return ( + + + + + + + 아이템 선택 + + +
+
+
+ + setGlobalFilter(e.target.value)} + className="flex-1" + /> +
+
+ {selectedCount}개 선택됨 +
+
+ + {loading ? ( +
+
아이템을 불러오는 중...
+
+ ) : ( +
+ + + {table.getHeaderGroups().map((headerGroup) => ( + + {headerGroup.headers.map((header) => ( + + {header.isPlaceholder + ? null + : flexRender( + header.column.columnDef.header, + header.getContext() + )} + + ))} + + ))} + + + {table.getRowModel().rows?.length ? ( + table.getRowModel().rows.map((row) => ( + row.toggleSelected()} + > + {row.getVisibleCells().map((cell) => ( + + {flexRender( + cell.column.columnDef.cell, + cell.getContext() + )} + + ))} + + )) + ) : ( + + + 검색 결과가 없습니다. + + + )} + +
+
+ )} + +
+
+ 총 {table.getFilteredRowModel().rows.length}개 아이템 +
+
+ +
+ {table.getState().pagination.pageIndex + 1} / {table.getPageCount()} +
+ +
+
+ +
+ + +
+
+ + + ) +} -- cgit v1.2.3